<template>
  <div>
    <!-- 合约持仓 -->
    <el-table
      :data="state.tableData"
      class="customer-table"
      v-loading="state.loading"
      header-cell-class-name="eltablebg"
      style="width: 100%"
    >
      <el-table-column prop="create_time" :label="$t('stock.stockName')">
        <template #default="r">
          <div class="flex align-center js-st">
            <div>{{ r.row.stock_name }}</div>
            <div
              class="share-color text-10 tag us"
              v-if="r.row.stock_type === 1"
            >
              US
            </div>
            <div
              class="share-color text-10 tag hk"
              v-if="r.row.stock_type === 2"
            >
              HK
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="stock_code" :label="$t('stock.stockCode')">
      </el-table-column>
      <el-table-column prop="lever_type" :label="$t('exchange.direction')">
        <template #default="r">
          <span :class="r.row.order_type === 1 ? 'text-green' : 'text-red'">{{
            r.row.order_type === 1 ? $t("lever.buyup") : $t("lever.buyfall")
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="open_price" :label="$t('exchange.openingPrice')">
        <template #default="r">
          {{ $currency(r.row.open_price) }}
        </template>
      </el-table-column>
      <el-table-column prop="deal_price" :label="$t('stock.orderAmount')">
        <template #default="r">
          {{ $currency(r.row.deal_price) }}
        </template>
      </el-table-column>

      <el-table-column prop="" :label="$t('exchange.currentPrice')">
        {{ $currency(nowprice) }}
      </el-table-column>

      <el-table-column
        align="center"
        prop=""
        :label="$t('exchange.profitAndLoss')"
      >
        <template #default="r">
          <span
            :class="
              countWinloseFun(
                nowprice,
                r.row.order_type,
                r.row.open_price,
                r.row.deal_price,
                r.row.profit_ratio,
                r.row.order_status
              ) < 0
                ? 'text-red'
                : 'text-green'
            "
          >
            <span
              v-if="
                countWinloseFun(
                  nowprice,
                  r.row.order_type,
                  r.row.open_price,
                  r.row.deal_price,
                  r.row.profit_ratio,
                  r.row.order_status
                ) > 0
              "
              >+</span
            >
            {{
              $currency(
                countWinloseFun(
                  nowprice,
                  r.row.order_type,
                  r.row.open_price,
                  r.row.deal_price,
                  r.row.profit_ratio,
                  r.row.order_status
                )
              )
            }}</span
          >
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="open_time"
        :label="$t('assets.handlingFee')"
      >
        <template #default="r">
          <span>{{
            r.row.order_status != 5 ? $currency(r.row.handling_fee) : "--"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="open_time"
        :label="$t('stock.orderTime')"
      >
        <template #default="r">
          <span>{{ getTimeZoneDate(r.row.open_time) }}</span>
        </template>
      </el-table-column>
      <el-table-column align="right" :label="$t('lever.duration')">
        <template #default="r">
          <count-down
            content-class="text-warning"
            v-if="r.row.close_time"
            :end-time="
              Date.parse(new Date(getTimeZoneDate(r.row.close_time))) / 1000 +
                ''
            "
            :start-time="r.row?.system_time"
          ></count-down>
          <!-- <Downtime
            v-if="r.row.close_time"
            :numtime="
              Date.parse(new Date(getTimeZoneDate(r.row.close_time))) -
                r.row.system_time
            "
            :istable="true"
          /> -->
        </template>
      </el-table-column>
      <template #empty>
        <div>
          <Norecord :useDark="true" />
          <!-- <div class="quotet3 text-12 mb-60 l-10">暂无数据</div> -->
        </div>
      </template>
    </el-table>
    <!-- 监听table滚动条触底 -->
    <Tablescroll @scroll="tableScroll" />
  </div>
</template>

<script>
import Norecord from "@/components/noRecord/NoRecord.vue";
import { StockOrderSecondLeverOrderPage } from "@/api/stock-trading";
import { demoStockOrderSecondLeverOrderPage } from "@/api/demo";
import UseSystemSetting from "@/commonapi/useSystemSetting";
import { reactive, onMounted, watch } from "vue";
import { countWinlose } from "@/utils/common";
import { useStore } from "vuex";
import CountDown from "@/components/countDown/index.vue";
// import Downtime from "@/components/downTime";
import Tablescroll from "@/components/tablescroll/index.vue";
import { getTimeZoneDate } from "@/utils/times.js";
import { formatDecimal } from "@/utils/common.js";

export default {
  name: "ContractPositon",
  components: { Norecord, CountDown, Tablescroll },
  props: {
    checked: Boolean,
    tradingid: Number,
    nowprice: Number,
    priceAccuracy: Number,
  },
  emits: ["curenttotal"],
  setup(props, { emit }) {
    const $store = useStore();
    const state = reactive({
      listParam: {
        page: 0,
        limit: 10,
        order_status: 2,
      },
      loading: false,
      tableData: [],
      tradingid: props.tradingid,
      total: 0,
      checked: props.checked,
    });
    /**
     * methods
     */
    // 获取开关状态
    const { virtual_wallet } = UseSystemSetting();
    // eslint-disable-next-line no-unused-vars
    watch(
      () => props.tradingid,
      (val) => {
        if (val !== state.tradingid) {
          state.tradingid = val;
          getList();
        }
      }
    );
    watch(
      () => props.checked,
      (val) => {
        console.log(val);
        state.listParam.page = 0;
        getList();
      }
    );

    const refresh = () => {
      state.tableData = [];
      state.listParam.page = 0;
      getList();
    };
    onMounted(() => {
      if ($store.state.user.token) {
        getList();
      }
    });
    const getList = () => {
      if (!$store.state.user.token) {
        return;
      }
      const param = { ...state.listParam };
      // 判断是否只显示当前币
      // if (props.checked) {

      // }
      param.currency_match_id = props.tradingid;
      state.loading = true;
      let setFun = virtual_wallet.value
        ? demoStockOrderSecondLeverOrderPage
        : StockOrderSecondLeverOrderPage;
      setFun(param).then((res) => {
        state.loading = false;
        if (state.listParam.page === 0) {
          state.tableData = res.data.items;
          emit("curenttotal", res.data.total);
        } else {
          state.tableData = state.tableData.concat(res.data.items);
        }
        state.total = res.data.total;
      });
    };
    // table滚动条触底
    const tableScroll = () => {
      if (state.total > state.tableData.length) {
        state.listParam.page = state.listParam.page + 1;
        getList();
      }
    };
    const countWinloseFun = (
      nowprice,
      orderType,
      openPrice,
      dealPrice,
      profitAndLossRatio,
      orderStatus
    ) => {
      const nowPrice = orderStatus === 2 ? props.nowprice : nowprice;
      return formatDecimal(
        Number(
          countWinlose(
            nowPrice,
            orderType,
            openPrice,
            dealPrice,
            profitAndLossRatio
          )
        ),
        props.priceAccuracy
      );
    };
    return {
      state,
      getList,
      countWinloseFun,
      tableScroll,
      getTimeZoneDate,
      refresh,
    };
  },
};
</script>

<style scoped lang="less"></style>
